<template>
	<view>
		<image src="/static/work1.jpg" mode="" class="img_bg"></image>
		<view class="mask" v-show="mask_show">

		</view>
		<view class="" style="position: absolute; top: 0; width: 100%;">
			<form @submit="formSubmit" class="margin-t30 ">
				<view class="border-bottom bg_white margin-l10 margin-r10 margin-t30">
					<view class=" display justify-between align-center">
						<view class="text-36 padding-t30 padding-b30">巡检内容</view>
						<radio-group @change="radioChange">
							<view class="display justify-between align-center padding-r30">
								<block v-for="(item,index) in myRadio" :key="index">
									<view class="display justify-between align-center padding-l90">
										<radio style="transform:scale(0.7);" :value="item.name"
											:checked="index === current" />
										<view :style="item.name=='正常'?'color:#00C07F':'color:#FF5444'">{{item.name}}
										</view>
									</view>
								</block>
							</view>
						</radio-group>
					</view>
				</view>
				<view class="card1">
					<view v-show="false">
						<button type="default" @click="beginCanvas">开始绘图</button>
					</view>
					<image v-show="false" :src="canvasUrl" mode="widthFix"></image>
					<mosowe-canvas-image ref="mosoweCanvasComponents" @canvasImage="_canvasImage" :lists="lists"
						:height="lists[0].height" :width="lists[0].width" />
				</view>
				<view v-show="radiochange=='异常'" class="bg_white margin-l10 margin-r10">
					<!-- <view class="border-bottom display justify-between align-center" >
					<view class="text-36 padding-t30 padding-b30">计划整改时间</view>
					<view class="display align-center">
						<view>
						    <uni-calendar 
						    ref="calendar" 
						    :insert="false"
						    @confirm="confirm"
						     />
						     <view @click="open" >{{checkData?checkData:'请选择整改时间'}}</view>
						</view>
					</view>
				</view> -->
					<view class="">
						<!-- <view class="border-bottom display justify-between align-center" >
						<view class="text-36 padding-t30 padding-b30">隐患类型</view>
						<view class="display align-center">
							
							<picker @change="bindPickerChange" :value="index" custom-item="" :range="array" :range-key="'safety_name'">
										<view class="">
											{{array[index].safety_name}}
										</view>	
										
							</picker>
						</view>
					</view> -->
						<view class="border-bottom display justify-between align-center ">
							<view class="text-36 padding-t30 padding-b30">隐患级别</view>
							<view class="display align-center">

								<picker @change="levelChange" :value="index1" custom-item="" :range="array1"
									:range-key="'name'">
									<view class="">
										{{array1[index1].name}}
									</view>

								</picker>
							</view>
						</view>

					</view>
				</view>
				<view class="">
					<view class="border-bottom bg_white margin-l10 margin-r10">
						<view class="text-36 padding-t30 padding-b30">
							<text>拍照地址:</text>
							<text style="font-size: 32rpx;color: #0D98ED;margin-left: 20rpx;">{{addressName}}</text>
						</view>
					</view>
					
					<view class="border-bottom bg_white margin-l10 margin-r10">
						<view class="text-36 padding-t30 padding-b30">隐患部位及描述</view>
						<view class="display align-center">
							<textarea placeholder="请输入描述信息..." name="content" v-model="content"
								placeholder-style="color:#999;font-size:28upx;" />
						</view>
					</view>
					<view class="border-bottom bg_white margin-l10 margin-r10">
						<view class="display justify-between align-center">
							<view class="text-36 padding-t30 padding-b30">巡检照片</view>
							<view class="text-24 font-gray">图片大小限制500K,请勿上传无关内容。</view>
						</view>
						<view class="display align-center padding-b30">
							<image :src="phone" class="addImage padding-r10" v-if="phone!=''" @tap="previewImage(1)">
							</image>
							<image src="/static/add.png" class="addImage" @tap="upAdd()"></image>
						</view>
					</view>
					<view class="margin-t30">
						<button form-type="submit" class="loginButton" :disabled="disable_check">提交</button>
					</view>

				</view>
			</form>

		</view>
	</view>
</template>

<script>
	import amap from '../../../../components/amap-wx.130.js'
	import mosowe_canvas_image from "@/components/mosowe-canvas-image/mosowe-canvas-image.vue"
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	let that = this
	export default {
		components: {
			uniCalendar,
			mosowe_canvas_image
		},
		data() {
			return {
				index: [0],
				index1: [0],
				yinhuanName: '请选择隐患名称',
				uid: '',
				danger_id: '',
				array: [],
				array1: [{
						name: '一般隐患',
						id: 1
					},
					{
						name: '重大隐患',
						id: 2
					}
				],
				checkData: '',
				checked: '',
				conContent: '',
				myRadio: [{
						name: '正常',
						id: 1
					},
					{
						name: '异常',
						id: 2
					}
				],
				radiochange: '正常',
				current: 0,
				current1: 1,
				current2: 1,
				phone: '',
				safety_id: '',
				content: '',
				d_id: '',
				safety_level: '',
				disable_check: false,
				message: '',
				lists: [{
						type: 'image',
						content: '',
						width: 100,
						height: 200,
						size: 10,
						x: 0,
						y: 0,
						align: 'left',
						arc: false,
						arcX: 30,
						arcY: 20,
						arcR: 20
					},

					{
						type: 'text',
						content: '姓名',
						width: 100,
						height: 200,
						x: 10,
						y: 30,
						color: '#ffffff',
						size: 15,
						// maxWidth: 100, 
						// align: 'left', 
					},
					{
						type: 'text',
						content: '时间',
						width: 100,
						height: 200,
						x: 10,
						y: 20,
						color: '#ffffff',
						size: 15,
						// maxWidth: 100, 
						// align: 'left', 
					},
					{
						type: 'text',
						content: '地点',
						width: 100,
						height: 200,
						x: 10,
						y: 20,
						color: '#ffffff',
						size: 15,
						// maxWidth: 100, 
						// align: 'left', 
					},


				],
				canvasUrl: '',
				percent: '',
				amapPlugin: null,
				key: '7992d23027ebe8a1b4a812fcac91bfbf',
				addressName: '',
				mask_show: false
			}
		},
		onShow() {
			
		},
		onLoad(options) {
			this.d_id = options.id
			this.inspection_id = options.inspection_id
			var that = this
			this.uid = uni.getStorageSync('user').uid;
			this.token = uni.getStorageSync('user').token;
			this.lists[1].content = '姓名：' + uni.getStorageSync('user').nickname
			this.lists[3].content = '地点：' + uni.getStorageSync('addressName')

			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			// this.getRegeo();

			uni.request({
				url: 'https://aqmore.sxpz.vip/AppApi/Danger/getSafetyType?uid=' + this.uid,
				method: 'GET',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				success: function(res) {
					if (res.data.code == 100) {
						uni.showToast({
							title: res.data.datas.msg
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
							try {
								uni.removeStorageSync('user');
							} catch (e) {
								// error
							}
						}, 1500)
					}
					that.array = res.data.datas.safety_type
					that.safety_id = that.array[0].id
				}
			})
		},
		methods: {
			getRegeo() {
				/* var that = this
				this.amapPlugin.getRegeo({
					success: function(data) {

						console.log(data)
						that.addressName = data[0].name;
						uni.hideLoading();
						//成功回调
					},
					fail: (err) => {
						console.log(err)
					}
				});
 */

				uni.getLocation({
					type:'gcj02',
					success: (res) => {
						uni.hideLoading();
						console.log(res)
						let long = res.longitude.toString().slice(0,10);
						let lay = res.latitude.toString().slice(0,9);
						
						this.addressName = '经度:' +　long + ',' + '纬度:' +　lay;
					}
				})
			},


			bindPickerChange: function(e) {
				this.index = e.target.value
				this.safety_id = this.array[this.index].id
				this.safety_level = this.array[this.index1].safety_name
			},
			levelChange: function(e) {
				this.index1 = e.target.value

				this.current2 = parseInt(e.target.value) + 1
			},
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				this.checkData = e.fulldate
			},
			radioChange(e) {
				this.radiochange = e.detail.value;
				this.current1 = e.detail.value == '正常' ? '1' : '2'

			},
			/* upAdd(){
				this.mask_show=true
				let that = this
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					sourceType:['camera'],
					success:res => {
						uni.showLoading({
							title:'图片上传中',
							mask: true
						})
						console.log('准备开始上传图片')
						const tempFilePaths=res.tempFilePaths;
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function(image) {
								console.log(image.width);
								// 画图的布局
								that.lists[0].width = image.width + 20
								that.lists[0].height = image.height + 20
								that.lists[1].y = image.height - 60
								that.lists[2].y = image.height
								that.lists[3].y = image.height - 30
								console.log(that.lists[0].height);
							},
							fail: function(res) {
								console.log('失败了')
								console.log(res)
							}
						});
						const uploadTask = uni.uploadFile({
							url: 'https://aqmore.sxpz.vip/AppApi/Public/uploadImg?c=uperTest',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: uploadFileRes => {
								uni.hideLoading()
								that.getTime()
								that.canvasUrl = (uploadFileRes.data).replace("http:", "https:")
								that.lists[0].content = (uploadFileRes.data).replace("http:", "https:")
								that.phone = tempFilePaths[0]
								console.log(that.canvasUrl)
								setTimeout(function() {
									that.beginCanvas()
								}, 500)
							}
						})
					},
					fail:function(){
						that.mask_show=false
					}
				})	
			}, */
			upAdd() {
				let that = this
				this.disable_check = true
				this.getRegeo();
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						that.phone = res.tempFilePaths[0]
						uni.uploadFile({
							url: 'https://aqmore.sxpz.vip/AppApi/Public/uploadImg?c=uperTest',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: uploadFileRes => {
								// console.log('上传成功')
								that.phone = (uploadFileRes.data)
								that.disable_check = false
								uni.showToast({
									title: '可以提交'
								})
							}
						})
					},
				})
			},
			getTime: function() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				console.log(timer)
				this.lists[2].content = '时间：' + timer
				return timer;
			},
			beginCanvas() {
				this.$refs.mosoweCanvasComponents.createCanvas();
			},
			_canvasImage(e) {
				var that = this
				uni.uploadFile({
					url: 'https://aqmore.sxpz.vip/AppApi/Public/uploadImg?c=uperTest',
					filePath: e,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: uploadFileRes => {
						uni.hideLoading()
						that.mask_show = false
						console.log(uploadFileRes.data)
						that.phone = (uploadFileRes.data)
						console.log(that.phone)
					},
					fail: function(res) {}
				})
			},

			//查看大图
			previewImage: function(index) {
				var a = {}
				Array.from(a)
				a[0] = this.phone
				var nameArray = []
				for (var i in a) {
					nameArray.push(a[i])
				}
				console.log(nameArray)
				uni.previewImage({
					current: index,
					urls: nameArray,
					success: function(res) {
						console.log(res)
					},
					fail: function(res) {
						console.log(res)
					}
				})
			}, 
			formSubmit: function(e) {
				var that = this
				that.disable_check = true
				this.content = e.detail.value.content
				if (this.radiochange == '正常') {
					// console.log('uid='+this.uid+'&token='+this.token+'&danger_id='+this.d_id+'&status='+this.current1)测试传输的数据
					if (this.phone == '') {
						that.disable_check = false
						uni.showToast({
							title: '请上传巡检照片',
							icon: 'none'
						})
						return false
					}
					uni.request({
						url: 'https://aqmore.sxpz.vip/AppApi/SafetyInspection/setInspection',
						method: 'GET',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							uid: this.uid,
							token: this.token,
							danger_id: this.d_id,
							img: this.phone,
							remark: this.content,
							status: this.current1,
							inspection_id: this.inspection_id,
							pic_location:this.addressName
						},
						success: function(res) {
							if (res.data.code == 200) {
								that.message = res.data.datas
								that.disable_check = true
								uni.showToast({
									title: that.message,
									icon: 'success'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '../../workspace'
									})
								}, 500)
							} else if (res.data.code == 400) {
								that.message = res.data.datas.msg
								that.disable_check = true
								uni.showToast({
									title: that.message,
									icon: 'none'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '../../workspace'
									})
								}, 2000)
								return false
							}

						},
						fail: function(res_fail) {
							console.log(res_fail)
						}
					})
				} else if (this.radiochange == '异常') {
					if (this.content == '') {
						that.disable_check = false
						uni.showToast({
							title: '请上传巡检内容',
							icon: 'none'
						})
						return false
					}
					if (this.phone == '') {
						that.disable_check = false
						uni.showToast({
							title: '请上传巡检照片',
							icon: 'none'
						})
						return false
					}
					uni.request({
						url: 'https://aqmore.sxpz.vip/AppApi/SafetyInspection/setInspection',
						method: 'GET',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							uid: this.uid,
							token: this.token,
							danger_id: this.d_id,
							img: this.phone,
							remark: this.content,
							status: this.current1,
							safety_level: this.current2,
							inspection_id: this.inspection_id,
							ds_id: this.ds_id,
							pic_location:this.addressName
						},
						success: function(res) {
							if (res.data.code == 400) {
								that.message = res.data.datas.msg
								that.disable_check = true
								uni.showToast({
									title: that.message,
									icon: 'none'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '../../workspace'
									})
								}, 2000)
								return false
							}
							if (res.data.code == 200) {
								that.message = res.data.datas
								that.disable_check = true
								uni.showToast({
									title: that.message,
									icon: 'success'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '../../workspace'
									})
								}, 1500)
							}


						}
					})
				}
			}
		},
	}
</script>
<style scoped>
	page {
		margin: 0;
		padding: 0;
		/* background-color: #0d98ed; */
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);

	}

	.loginButton {
		height: 98upx;
		line-height: 98upx;
		background: #65caff;
		box-shadow: 0 2upx 10upx 0 rgba(115, 241, 255, 0.8);
		border-radius: 49upx;
		color: #fff;
		text-align: center;
		z-index: 99;
		position: relative;
	}
</style>
